<template>
  <div class="content">
    <!-- 底层背景动画-开始 -->
    <div id="animations">
      <div class="animation animation1">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation2">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation3 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation4">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation5 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation6">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation7 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation8">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation9 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation10">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
    </div>
    <!-- 底层背景动画-开始 -->

    <div id="head">
      <!--      <div class="getDate">-->
      <!--        <span>09:00:00</span>-->
      <!--        <span>星期三</span>-->
      <!--        <span>2018-07-28</span>-->
      <!--      </div>-->
      <!--      <div class="weather">-->
      <!--        <span>多云</span>-->
      <!--        <span>35~28度</span>-->
      <!--        <span>空气质量</span>-->
      <!--        <span>优</span>-->
      <!--      </div>-->
      <!-- 大标题 -->
      <div class="headLeft">
        <div class="buttonTemp"></div>
        <div class="buttons">
          <Button class="button" :button-name="buttonName1" @click="qiyeVisible=true"></Button>
          <Button class="button" :button-name="buttonName2" @click="gerenVisible=true"></Button>
          <Button class="button" :button-name="buttonName3" @click="jisuanVisible=true"></Button>
        </div>
      </div>
      <div class="headMiddle">
        <div class="headLogo">

          <h1>碳足迹和减碳量评估系统</h1>
          <img src="~@/assets/images/datav/dashLogo.png" class="logo">

        </div>
      </div>
      <div class="headRight">
        <div class="buttonTemp"></div>
        <div class="buttons">
          <Button class="button" :button-name="buttonName4"></Button>
          <Button class="button" :button-name="buttonName5"></Button>
          <Button class="button" :button-name="buttonName6"></Button>
        </div>

      </div>
    </div>


    <div id="body">
      <!--      ===========================-->
      <div class="bodyLeft rel">
        <div class="bodyLeftTop">
          <!--          <div class="childtitle"><h2>各区域产品挂牌数</h2></div>-->
          <Chart1 :height="leftHeight" :width="leftWidth" :chart-data="lineChartData"/>
        </div>
        <div class="bodyLeftBottom rel">
          <Chart2 :height="leftHeight" :width="leftWidth"/>
        </div>
      </div>
      <!--      ===========================-->
      <div class="bodyMiddle rel">
        <div class="bodyMiddleChild">

          <Chart3 :height="middleHeight" :width="middleWidth" style="z-index: 1;position: absolute"/>
          <div id="sun" style="z-index: 9;position: absolute"></div>

        </div>
      </div>
      <!--      //===========================-->
      <div class="bodyRight">
        <!-- 成交量实时动态滚动-开始 -->
        <div class="bodyRightTop rel">
          <Chart4 :height="rightHeight" :width="rightWidth"/>
        </div>
        <!-- 挂牌产品价格动态折线图-开始 -->
        <div class="bodyRightBottom rel">
          <Chart5 :height="rightHeight" :width="rightWidth"/>
        </div>
        <!-- 挂牌产品价格动态折线图-结束 -->
      </div>
      <!--      //===========================-->
    </div>

    <div id="foot">
      <!-- 挂牌会员实时监控-开始 -->
      <div class="footparent0">
        <div class="footChild">

          <Chart6 :height="footHeight" :width="footWidth"/>
        </div>
      </div>
      <!-- 挂牌会员实时监控-结束 -->
      <!-- 北海市猪链网动态-开始 -->
      <div class="footparent1">
        <div class="footChild">
          <Chart7 :height="footHeight" :width="footWidth"/>
        </div>
      </div>
      <!-- 北海市猪链网动态-结束 -->
      <!-- 交易大厅实时监控-开始 -->
      <div class="footparent2">
        <div class="footChild">
          <Chart8 :height="footHeight0" :width="footWidth0"/>

        </div>
      </div>
      <!-- 交易大厅实时监控-结束 -->
      <!-- 成交量实时监控-开始 -->
      <div class="footparent3">
        <div class="footChild">
          <Chart9 :height="footHeight" :width="footWidth"/>
        </div>
      </div>
      <!-- 成交量实时监控-结束 -->
    </div>

    <div class="mask">
      <div class="maskContent"></div>
    </div>

    <!--企业碳核算-->
    <qiye
      :visible.sync="qiyeVisible"
      v-dialogDrag
    ></qiye>
    <!--个人碳足迹-->
    <geren
      :visible.sync="gerenVisible"
      v-dialogDrag></geren>
    <gongchengjisuan
      :visible.sync="jisuanVisible"
      v-dialogDrag>
    </gongchengjisuan>
  </div>
</template>
<script>
import PanelGroup from './PanelGroup'
import LineChart from './LineChart'
import RaddarChart from './RaddarChart'
import PieChart from './PieChart'
import Chart from './BarChart'
import Custom from "@/views/dashboard/datavComponents/Custom";
import Chart1 from "@/views/dashboard/datavComponents/Chart1";
import Chart2 from "@/views/dashboard/datavComponents/Chart2";
import Chart4 from "@/views/dashboard/datavComponents/Chart4";
import Chart3 from "@/views/dashboard/datavComponents/Chart3";
import Chart5 from "@/views/dashboard/datavComponents/Chart5";
import Chart6 from "@/views/dashboard/datavComponents/Chart6";
import Chart7 from "@/views/dashboard/datavComponents/Chart7";
import Chart8 from "@/views/dashboard/datavComponents/Chart8";
import Chart9 from "@/views/dashboard/datavComponents/Chart9";
import Button from "@/views/dashboard/datavComponents/button";
import Qiye from './qiye'
import Geren from './geren'
import gongchengjisuan from "@/views/dashboard/gongchengjisuan";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    Button,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    Chart,
    Custom,
    Chart1,
    Chart2,
    Chart3,
    Chart4,
    Chart5,
    Chart6,
    Chart7,
    Chart8,
    Chart9,
    Qiye,
    Geren,
    gongchengjisuan
  },

  data() {
    return {
      buttonName1: '企业碳核算',
      buttonName2: '个人碳足迹',
      buttonName3: '工程计算',
      buttonName4: '碳抵清',
      buttonName5: '区域双碳',
      buttonName6: '碳交易',
      lineChartData: lineChartData.newVisitis,
      leftHeight: '27.5vh',
      leftWidth: (97.5 / 4) + 'vw',
      middleHeight: '60vh',
      middleWidth: (97.5 / 2) + 'vw',
      rightHeight: '27.5vh',
      rightWidth: (97.5 / 4) + 'vw',
      footHeight0: 30,
      footWidth0: 97.5 / 4,
      footHeight: '100%',
      footWidth: (97.5 / 4) + 'vw',
      qiyeVisible: false,
      gerenVisible: false,
      jisuanVisible:false
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },

  },
  mounted() {

  }
}
</script>
<style lang="css" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

/*.footChild, .bodyRightBottom, .bodyRightTop, .bodyMiddleChild, .bodyLeftBottom, .bodyLeftTop {*/
/*  border: 2px solid rgba(8, 67, 137, .7);*/
/*}*/

/* 以下body设置 普通屏,缩小一半 */
/*body {*/
/*  transform: scaleY(0.5) scaleX(0.5) !important;*/
/*  position: relative;*/
/*  left: -25%;*/
/*  top: -25%;*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  overflow: hidden !important;*/
/*}*/

.content {
  position: relative;
  height: 100% /* 2160/24.65 */;
  box-sizing: border-box;
  /*padding-bottom: 1.42vw  !* 35/24.65 *!;*/
  background: url(~@/assets/images/datav/beijing1.png) no-repeat;
  /*background-color: #102567;*/
  background-size: 100% 100%;
  overflow: hidden;
  font-size: 1.217vw /* 30/24.65 */;
}

html {
  width: 100vw /* 3840/24.65 */;
  height: 100vh /* 2160/24.65 */;
}


/*头部head--开始*/
#head {
  position: relative;
  width: 100vw /* 3840/24.65 */;
  height: 12vh /* 240/24.65 */;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.buttonTemp {
  height: 6vh;
}

.headLeft {
  flex: 1;
}

.headMiddle {
  flex: 1;
}

.headRight {
  flex: 1;
}

.headLogo {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


#head .getDate {
  float: left;
  margin-left: 5.03vw /* 124/24.65 */;
}

#head .getDate span {
  margin-right: 1.42vw /* 35/24.65 */;
}

#head .weather {
  float: right;
}

#head .weather span {
  margin-right: 1.826vw /* 45/24.65 */;
}

.headLogo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.headLogo h1 {
  /*width: 100vw !* 900/24.65 *!;*/
  height: 6vh /* 240/24.65 */;
  font-size: 4.5vh /* 80/24.65 */;
  line-height: 6vh /* 240/24.65 */;
  /*margin: 0 auto;*/
  font-weight: bold;
  text-align: left;
  background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#CAE0FF), to(#6EB2FF));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 0.1vw;
}

.headLogo img {
  height: 5.4vh;
  width: auto;
}


/*头部head--结束*/

/*主体body--开始*/
#body {
  display: flex;
  box-sizing: border-box;
  /*margin-top: 2vh !* 20/24.65 *!;*/
  height: 56vh /* 1132/24.65 */;
  width: 100vw;
}

/*主体左边区域*/
.bodyLeft {
  width: calc(97.5vw / 4);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-left: 0.5vw;
}

/*各区域挂牌数量*/
.bodyLeftTop {
  width: 100%;
  height: 27.5vh /* 548/24.65 */;
  /*position: relative;*/

  display: inline-block;
}

/*当前成交总数和月成交总数*/
.bodyLeftBottom {
  width: 100% /* 1265/24.65 */;
  height: 27.5vh /* 550/24.65 */;

  margin-top: 1vh;
  display: inline-block;
}

/*主体中间区域*/
.bodyMiddle {
  width: calc(97.5vw / 2 + 0.5vw) /* 1196/24.65 */;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  height: 100% /* 1134/24.65 */;
  overflow: hidden;
}


/*主体右边区域*/
.bodyRight {
  width: calc(97.5vw / 4);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/*挂牌产品类别*/
.bodyRightTop {
  width: 100% /* 1262/24.65 */;
  height: 27.5vh /* 548/24.65 */;
  box-sizing: border-box;

}

.bodyRightBottom {
  width: 100% /* 1262/24.65 */;
  height: 27.5vh /* 550/24.65 */;
  box-sizing: border-box;
  margin-top: 1vh;
}


/*主体body--结束*/

/*底部foot--开始*/
#foot {
  display: flex;
  width: 100vw;
  margin-top: 1vh;
  margin-bottom: 0.5vh;
  height: 30vh /* 707/24.65 */;
  padding-left: 0.5vw;
  padding-left: 0.5vw;
}

.footparent0 {
  width: calc(97.5vw / 4);
  height: 100%;
  margin-right: 0.5vw;
}

.footparent1 {
  width: calc(97.5vw / 4);
  height: 100%;
  margin-right: 0.5vw;
}

.footparent2 {
  width: calc(97.5vw / 4);
  height: 100%;
  margin-right: 0.5vw;
}

.footparent3 {
  width: calc(97.5vw / 4);
  height: 100%;
  margin-right: 0;
}

.footChild {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

/*底部foot--结束*/

/*公共部分--开始*/
/*边框*/
/*.footChild, .bodyRightBottom, .bodyRightTop, .bodyMiddleChild, .bodyLeftBottom, .bodyLeftTop {*/
/*  !*border: 0vw  !* 4/24.65 *! solid rgba(8, 67, 137, .7);*!*/
/*}*/

/*背景色*/
.footChild, .bodyLeftTop, .bodyLeftBottom, .bodyMiddle, .bodyRightBottom, .bodyRightTop {
  background: rgba(31, 53, 249, 0.15);
}

/*小标题*/
.childtitle {
  position: absolute;
  left: 0.325vw /* 8/24.65 */;
  top: 0.487vw /* 12/24.65 */;
  display: inline-block;
  background: url(~@/assets/images/datav/childtitle.png) no-repeat;
  background-size: 100% 100%;
  left: 0.325vw /* 8/24.65 */;
  top: 0.487vw /* 12/24.65 */;
  padding: 0.081vw /* 2/24.65 */ 2.028vw /* 50/24.65 */ 0.081vw /* 2/24.65 */ 0.609vw /* 15/24.65 */;
}

.childtitle h2 {
  text-align: left;
  font-size: 1.704vw /* 42/24.65 */;
  display: inline-block;
}

#sun {
  z-index: 999;
  background: url(~@/assets/images/datav/a.png) no-repeat;
  animation: light 2s linear infinite;
  height: 100%;
  background-size: 100% 100%;
}

/*北海地图svg样式*/
svg {
  margin: 0;
  padding-top: 100px;
  width: 100%;
  height: 1000px;
}

path.hover {
  fill: red;
  stroke: red;
  stroke-width: 2
}

text {
  font-size: 18px;
  display: inline-block;
}

@keyframes light {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

/*背景动画-开始*/
#animations {
  position: absolute;
  width: 100vw /* 3840/24.65 */;
  height: 100vh /* 2160/24.65 */;
  overflow: hidden;
}

.animation {
  position: absolute;

}

.animation1 {
  left: 1%;
  top: 1%;
  transform: scale(1);
}

.animation2 {
  left: 0.5%;
  bottom: 13%;
  transform: scale(0.5);
}

.animation3 {
  left: 20%;
  top: 60%;
  transform: scale(1);
}

.animation4 {
  left: 30%;
  top: 15%;
  transform: scale(.9);
}

.animation5 {
  left: 45%;
  top: 2%;
  transform: scale(0.3);
}

.animation6 {
  left: 60%;
  top: -2%;
  transform: scale(.8);
}

.animation7 {
  left: 70%;
  top: 40%;
  transform: scale(1);
}

.animation8 {
  right: 12%;
  top: 8%;
  transform: scale(1.1);
}

.animation9 {
  left: 90%;
  bottom: 12%;
  transform: scale(1);
}

.animation10 {
  left: 50%;
  top: 80%;
  transform: scale(1.5);
}

.animation10 div {
  animation-direction: reverse;
}

.animation div {
  position: absolute;
  top: 0;
  left: 0;
  width: 30vh /* 618/24.65 */;
  height: 30vh /* 618/24.65 */;
  border-radius: 50%;
  animation: move linear infinite;
  opacity: .3;
  filter: alpha(opacity=30);
}

.animation .animate1 {
  background: url(~@/assets/images/datav/1.png) no-repeat;
  background-size: 100%;
  animation-duration: 30s;
}

.animation .animate2 {
  background: url(~@/assets/images/datav/2.png) no-repeat;
  background-size: 100%;
  animation-duration: 20s;
  animation-direction: reverse;
}

.animation .animate3 {
  background: url(~@/assets/images/datav/3.png) no-repeat;
  background-size: 100%;
  animation-duration: 15s;
}

.fanzhuan .animate1 {
  animation-direction: reverse;
  animation-duration: 25s;
}

.fanzhuan .animate2 {
  animation-direction: normal;
  animation-duration: 15s;
}

.fanzhuan .animate3 {
  animation-direction: reverse;
  animation-duration: 10s;
}

@keyframes move {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

/*背景动画-开始*/
</style>
